<form (ngSubmit)="add()" style="min-width: 400px; width: 750px;" [ngStyle]="tableConfig.addDialogStyle">
  <mat-toolbar color="primary">
    <h2>{{ title | translate }}</h2>
    <span class="flex-1"></span>
    <button mat-icon-button
            (click)="cancel()"
            type="button">
      <mat-icon>close</mat-icon>
    </button>
  </mat-toolbar>
  
  @if (isLoading$ | async) {
    <mat-progress-bar 
      color="warn"  
      mode="indeterminate" 
      class="dialog-progress-bar">
    </mat-progress-bar>
  } @else {
    <div style="height: 4px;"></div>
  }
  
  <div mat-dialog-content>
    <cne-anchor #itemDetailsFormAnchor></cne-anchor>
  </div>
  
  <div mat-dialog-actions class="flex items-center justify-end">
    <button mat-button color="primary"
            type="button"
            cdkFocusInitial
            [disabled]="(isLoading$ | async)"
            (click)="cancel()"> 
      {{ 'action.cancel' | translate }}
    </button>
    <button mat-raised-button color="primary"
            type="submit"
            [disabled]="(isLoading$ | async) || detailsForm?.invalid">
      {{ 'action.add' | translate }}
    </button>
  </div>
</form>
